<!--
 * @Author: 刘程琳 2796055305@qq.com
 * @Date: 2025-09-11 08:37:06
 * @LastEditors: 刘程琳 2796055305@qq.com
 * @LastEditTime: 2025-09-11 10:15:06
 * @FilePath: \23信算前端\city\src\pages\components\Left1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>

        <!-- 1.提供图表容器  ref模板引用 类似于id  -->
        <div ref="bottom3" style="height: 200px;"></div>
    </div>
</template>
<script>
// 2.引入折线图构造函数 

// 引入get请求 @表示src别名 
import { get } from '@/utils/request';
// 引入momentjs
import moment from 'moment';
import { Scatter } from '@antv/g2plot';

export default {
    data() {
        return {
            title: '检测点信息',

        }
    },


    methods: {
        // 封装加载折线图图表函数 
        loadLine() {
            fetch('https://gw.alipayobjects.com/os/antfincdn/t81X1wXdoj/scatter-data.json')
                .then((res) => res.json())
                .then((data) => {
                    const scatterPlot = new Scatter(this.$refs.bottom3, {
                        appendPadding: 30,
                        data,
                        xField: 'x',
                        yField: 'y',
                        colorField: 'genre',
                        color: [
                            'r(0.4, 0.3, 0.7) 0:rgba(255,255,255,0.5) 1:#5B8FF9',
                            'r(0.4, 0.4, 0.7) 0:rgba(255,255,255,0.5) 1:#61DDAA',
                        ],
                        sizeField: 'size',
                        size: [5, 20],
                        shape: 'circle',
                        xAxis: {
                    label: {
                        
                        style: {
                            fill: "white",
                            fontSize: 16
                        }
                    }
                },
                // 配置y轴字段对象 
               
                        yAxis: {
                            nice: true,
                            line: {
                                style: {
                                    stroke: 'white',
                                },
                            },
                        },
                        xAxis: {
                            grid: {
                                line: {
                                    style: {
                                        stroke: 'white',
                                    },
                                },
                            },
                        tooltip: {
                                showMarkers: true,
                                domStyles: {
                                    "g2-tooltip": {
                                        background: '#61DDAA',
                                        color: "white",
                                        fontSize: 20
                                    }
                                }
                            },
                            line: {
                                style: {
                                    stroke: '#eee',
                                },
                            },
                        },
                    });
                    scatterPlot.render();
                });
        }
    },

    // 最早获取dom元素的生命周期  图表渲染dom元素
    mounted() {

        this.loadLine();
    }
}
</script>
<style lang="less" scoped></style>